<!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <title>imagesLoaded tests</title>

  <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css" />
  <link rel="stylesheet" href="css/tests.css" />

  <script src="../node_modules/ev-emitter/ev-emitter.js"></script>
  <script src="../node_modules/qunit/qunit/qunit.js"></script>
  <script src="../node_modules/jquery/dist/jquery.js"></script>

  <script src="../imagesloaded.js"></script>

  <script src="unit/basics.js"></script>
  <script src="unit/selector-string.js"></script>
  <script src="unit/single-element.js"></script>
  <script src="unit/local-files.js"></script>
  <script src="unit/data-uri.js"></script>
  <script src="unit/append.js"></script>
  <script src="unit/no-images.js"></script>
  <script src="unit/jquery-success.js"></script>
  <script src="unit/jquery-fail.js"></script>
  <script src="unit/non-element.js"></script>
  <script src="unit/background.js"></script>
  <script src="unit/picture.js"></script>
  <script src="unit/srcset.js"></script>

</head>
<body>

  <h1>imagesLoaded tests</h1>

  <div id="qunit"></div>

  <h2>Basics</h2>

  <div id="basics">
    <img src="https://i.imgur.com/xrQHn.jpg" />
    <img src="https://i.imgur.com/b3fBJ.jpg" />
    <img src="https://i.imgur.com/xmSh2.jpg" />
    <img src="https://i.imgur.com/iIpJm.jpg" />
    <img src="https://i.imgur.com/cvZZl10.gif" />
  </div>

  <img id="mario-with-shell" src="https://i.imgur.com/ZAVN3.png" >

  <h2>Locals</h2>

  <div id="locals">
    <img src="img/blue-shell.jpg" />
    <img src="img/bowser-jr.jpg" />
    <!-- thunder cloud has bad permissions, should 403 -->
    <img src="img/not-there.jpg" />
  </div>

  <h2>Data URI</h2>

  <div id="data-uri">
    <img src="" />
    <img src="" />
  </div>

  <h2>append</h2>

  <div id="append"></div>

  <h2>no images</h2>

  <div id="no-images"></div>

  <h2>jQuery success</h2>

  <div id="jquery-success">
    <img src="https://i.imgur.com/YbYCPFF.png" />
    <img src="https://i.imgur.com/6UdOxeB.png" />
    <img src="https://i.imgur.com/qd8G15D.png" />
  </div>

  <h2>jQuery fail</h2>

  <div id="jquery-fail">
    <img src="https://i.imgur.com/xmSh2.jpg" />
    <img src="img/bowser-jr.jpg" />
    <img src="https://i.imgur.com/ZAVN3.png">
    <img src="img/not-there.jpg" />
    <img src="foobar.jpg" />
  </div>

  <h2>background</h2>

  <div id="background">
    <div class="bg-box tulip"></div>
    <div class="bg-box thunder-cloud"></div>
    <div class="bg-box multi"></div>
    <div class="bg-box blue"></div>
    <div class="bg-box gulls">
      <img src="https://picsum.photos/400/300/?random" />
      <img src="https://picsum.photos/800/600/?random" />
    </div>
  </div>

  <h2>picture</h2>

  <div id="picture-list">
    <picture>
      <source srcset="https://picsum.photos/id/1036/1200/900" media="(min-width: 1200px)">
      <source srcset="https://picsum.photos/id/1036/800/600" media="(min-width: 800px)">
      <img src="https://picsum.photos/id/1036/400/300">
    </picture>
    <picture>
      <source srcset="https://picsum.photos/id/103/1200/900" media="(min-width: 1200px)">
      <source srcset="https://picsum.photos/id/103/800/600" media="(min-width: 800px)">
      <img src="https://picsum.photos/id/103/400/300">
    </picture>
    <picture>
      <source srcset="https://picsum.photos/id/1080/900/1200" media="(min-width: 1200px)">
      <source srcset="https://picsum.photos/id/1080/600/800" media="(min-width: 800px)">
      <img src="https://picsum.photos/id/1080/300/400">
    </picture>
  </div>

  <h2>srcset</h2>

  <div id="srcset">
    <img
      srcset="
        https://picsum.photos/id/1074/1200/900 1200w,
        https://picsum.photos/id/1074/800/600 800w,
        https://picsum.photos/id/1074/400/300 400w
      "
      sizes="
        (min-width: 1200px) 240px,
        (min-width: 800px) 240px,
        240px,
      "
    >
    <img
      srcset="
        https://picsum.photos/id/159/900/1200 900w,
        https://picsum.photos/id/159/600/800 600w,
        https://picsum.photos/id/159/300/400 300w
      "
      sizes="
        (min-width: 1200px) 240px,
        (min-width: 800px) 240px,
        240px,
      "
    >
    <img
      srcset="
        https://picsum.photos/id/133/1200/900 1200w,
        https://picsum.photos/id/133/800/600 800w,
        https://picsum.photos/id/133/400/300 400w
      "
      sizes="
        (min-width: 1200px) 240px,
        (min-width: 800px) 240px,
        240px,
      "
    >
  </div>


</body>
</html>
